<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>优化结果 - AI简历生成应用</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50 pb-36 pt-14">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow fixed top-0 left-0 right-0 z-10">
      <div
        class="h-14 flex items-center justify-center relative px-4 max-w-md mx-auto"
      >
        <a href="optimize.html" class="absolute left-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 19l-7-7 7-7"
            />
          </svg>
        </a>
        <h1 class="text-lg font-medium">优化结果</h1>
      </div>
    </div>

    <!-- 优化完成提示 -->
    <div class="px-4 mt-4">
      <div class="bg-emerald-50 rounded-xl shadow p-4 mb-4">
        <div class="flex items-center">
          <div
            class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-emerald-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>
          <div>
            <h3 class="text-base font-medium text-gray-900">优化完成</h3>
            <p class="text-sm text-gray-600 mt-1">
              AI已完成简历优化，效果提升约78%
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 优化结果标签页 -->
    <div class="px-4">
      <div class="bg-white rounded-xl shadow overflow-hidden">
        <!-- 标签页头部 -->
        <div class="flex text-center border-b border-gray-200">
          <div class="flex-1 py-3 relative tab active" data-tab="comparison">
            <span class="text-purple-600 font-medium">优化对比</span>
            <div
              class="absolute bottom-0 left-1/4 right-1/4 h-0.5 bg-purple-600 rounded-full"
            ></div>
          </div>
          <div class="flex-1 py-3 relative tab" data-tab="suggestion">
            <span class="text-gray-600">改进建议</span>
          </div>
        </div>

        <!-- 标签页内容 -->
        <div id="tab-content">
          <!-- 优化对比标签内容 -->
          <div id="comparison-content" class="p-4">
            <h3 class="text-base font-medium text-gray-900 mb-3">自我评价</h3>

            <!-- 优化前 -->
            <div class="mb-4">
              <div class="flex items-center mb-2">
                <div
                  class="w-6 h-6 bg-gray-100 rounded-full flex items-center justify-center mr-2"
                >
                  <span class="text-xs text-gray-600">前</span>
                </div>
                <span class="text-sm text-gray-600">优化前</span>
              </div>
              <div class="bg-gray-50 rounded-lg p-3 text-sm text-gray-600">
                有4年产品经验，做过多个项目，负责过产品从0到1的设计和开发。和开发团队沟通良好，懂技术，有数据分析能力。
              </div>
            </div>

            <!-- 优化后 -->
            <div>
              <div class="flex items-center mb-2">
                <div
                  class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-2"
                >
                  <span class="text-xs text-purple-600">后</span>
                </div>
                <span class="text-sm text-gray-600">优化后</span>
              </div>
              <div class="bg-purple-50 rounded-lg p-3 text-sm text-gray-900">
                拥有<span class="bg-emerald-100 px-1">4年互联网产品经验</span
                >，负责过<span class="bg-emerald-100 px-1"
                  >多款用户端产品从0到1的设计开发和迭代优化</span
                >，对<span class="bg-emerald-100 px-1"
                  >用户需求分析、产品规划和项目管理有丰富经验</span
                >。擅长与研发、设计和业务团队协作，推动产品落地。具有较强的<span
                  class="bg-emerald-100 px-1"
                  >数据分析能力</span
                >，能够基于数据做出产品决策。<span class="bg-emerald-100 px-1"
                  >熟悉敏捷开发流程</span
                >，具备优秀的沟通协调能力和解决问题的能力。
              </div>
            </div>

            <hr class="my-5 border-gray-200" />

            <h3 class="text-base font-medium text-gray-900 mb-3">工作经历</h3>

            <!-- 优化前 -->
            <div class="mb-4">
              <div class="flex items-center mb-2">
                <div
                  class="w-6 h-6 bg-gray-100 rounded-full flex items-center justify-center mr-2"
                >
                  <span class="text-xs text-gray-600">前</span>
                </div>
                <span class="text-sm text-gray-600">优化前</span>
              </div>
              <div class="bg-gray-50 rounded-lg p-3 text-sm text-gray-600">
                负责公司核心产品的迭代，做了很多功能，带领团队完成了多次版本迭代，产品月活用户增长了很多。
              </div>
            </div>

            <!-- 优化后 -->
            <div>
              <div class="flex items-center mb-2">
                <div
                  class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-2"
                >
                  <span class="text-xs text-purple-600">后</span>
                </div>
                <span class="text-sm text-gray-600">优化后</span>
              </div>
              <div class="bg-purple-50 rounded-lg p-3 text-sm text-gray-900">
                负责公司<span class="bg-emerald-100 px-1"
                  >核心产品的需求分析、产品规划和迭代优化</span
                >，<span class="bg-emerald-100 px-1"
                  >主导了产品从0到1的设计和开发</span
                >，带领团队完成<span class="bg-emerald-100 px-1"
                  >多次重大版本迭代</span
                >，产品<span class="bg-emerald-100 px-1">月活用户增长300%</span
                >。负责<span class="bg-emerald-100 px-1"
                  >与研发、设计和业务团队的协作</span
                >，保障产品按时高质量交付。
              </div>
            </div>
          </div>

          <!-- 改进建议标签内容 -->
          <div id="suggestion-content" class="p-4 hidden">
            <div class="mb-5">
              <div class="flex items-center mb-3">
                <div
                  class="w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center mr-3"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 text-amber-500"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
                    />
                  </svg>
                </div>
                <h3 class="text-base font-medium text-gray-900">总体建议</h3>
              </div>
              <div class="ml-11 text-sm text-gray-600">
                <p class="mb-2">
                  您的简历整体上已经比较完善，但仍有一些提升空间。建议重点突出您的具体成就和量化结果，这将使您的简历更有说服力。
                </p>
                <p>适当增加行业关键词，可以提高简历在ATS系统中的匹配度。</p>
              </div>
            </div>

            <div class="mb-5">
              <div class="flex items-center mb-3">
                <div
                  class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 text-purple-600"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                    />
                  </svg>
                </div>
                <h3 class="text-base font-medium text-gray-900">自我评价</h3>
              </div>
              <div class="ml-11 text-sm text-gray-600">
                <p class="mb-2">• 自我评价部分已大幅改进，更加专业和全面</p>
                <p class="mb-2">• 增加了关键能力和经验的具体描述</p>
                <p>• 使用了更专业的行业术语和表达方式</p>
              </div>
            </div>

            <div class="mb-5">
              <div class="flex items-center mb-3">
                <div
                  class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 text-blue-600"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                    />
                  </svg>
                </div>
                <h3 class="text-base font-medium text-gray-900">工作经历</h3>
              </div>
              <div class="ml-11 text-sm text-gray-600">
                <p class="mb-2">• 工作描述更加具体，突出了您的职责范围</p>
                <p class="mb-2">• 添加了量化的成果（月活增长300%）</p>
                <p>• 建议再增加1-2个具体项目的详细描述和成果</p>
              </div>
            </div>

            <div>
              <div class="flex items-center mb-3">
                <div
                  class="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center mr-3"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 text-emerald-600"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                    />
                  </svg>
                </div>
                <h3 class="text-base font-medium text-gray-900">专业技能</h3>
              </div>
              <div class="ml-11 text-sm text-gray-600">
                <p class="mb-2">• 技能描述有所改善，但建议添加更多具体技能</p>
                <p class="mb-2">• 可以考虑按技能类别分组展示</p>
                <p>• 建议添加熟悉的产品设计工具和方法论</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评分卡片 -->
    <div class="px-4 mt-4">
      <div class="bg-white rounded-xl shadow p-4">
        <h3 class="text-base font-medium text-gray-900 mb-3">简历评分</h3>

        <div class="grid grid-cols-2 gap-4 mb-4">
          <!-- 优化前评分 -->
          <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="text-sm text-gray-600 mb-1">优化前</div>
            <div class="text-2xl font-medium text-gray-900">68</div>
            <div class="text-xs text-gray-500">基础水平</div>
          </div>

          <!-- 优化后评分 -->
          <div class="bg-purple-50 rounded-lg p-3 text-center">
            <div class="text-sm text-gray-600 mb-1">优化后</div>
            <div class="text-2xl font-medium text-purple-600">92</div>
            <div class="text-xs text-purple-600">专业水平</div>
          </div>
        </div>

        <!-- 评分详情 -->
        <div class="space-y-3">
          <!-- 专业度 -->
          <div>
            <div class="flex justify-between text-sm mb-1">
              <div class="text-gray-600">专业度</div>
              <div class="text-gray-900">90分</div>
            </div>
            <div class="bg-gray-200 h-1.5 rounded-full">
              <div class="bg-purple-600 h-1.5 rounded-full w-[90%]"></div>
            </div>
          </div>

          <!-- 完整度 -->
          <div>
            <div class="flex justify-between text-sm mb-1">
              <div class="text-gray-600">完整度</div>
              <div class="text-gray-900">95分</div>
            </div>
            <div class="bg-gray-200 h-1.5 rounded-full">
              <div class="bg-purple-600 h-1.5 rounded-full w-[95%]"></div>
            </div>
          </div>

          <!-- ATS友好度 -->
          <div>
            <div class="flex justify-between text-sm mb-1">
              <div class="text-gray-600">ATS友好度</div>
              <div class="text-gray-900">88分</div>
            </div>
            <div class="bg-gray-200 h-1.5 rounded-full">
              <div class="bg-purple-600 h-1.5 rounded-full w-[88%]"></div>
            </div>
          </div>

          <!-- 吸引力 -->
          <div>
            <div class="flex justify-between text-sm mb-1">
              <div class="text-gray-600">吸引力</div>
              <div class="text-gray-900">94分</div>
            </div>
            <div class="bg-gray-200 h-1.5 rounded-full">
              <div class="bg-purple-600 h-1.5 rounded-full w-[94%]"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div
      class="fixed bottom-16 left-0 right-0 h-14 bg-white border-t border-gray-200 flex items-center px-4"
    >
      <a
        href="detail.html"
        class="flex-1 flex justify-center items-center border border-purple-600 text-purple-600 py-2 rounded-md text-sm mr-2"
      >
        返回简历
      </a>
      <button
        id="export-btn"
        class="flex-1 flex justify-center items-center bg-purple-600 text-white py-2 rounded-md text-sm ml-2"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 mr-1"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
          />
        </svg>
        导出简历
      </button>
    </div>

    <!-- 导出简历弹出层 -->
    <div
      id="export-menu"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-end justify-center z-20 hidden"
    >
      <div class="bg-white rounded-t-xl w-full max-w-md">
        <div class="p-4 border-b border-gray-100">
          <h3 class="text-base font-medium text-gray-900 text-center">
            导出简历
          </h3>
        </div>
        <div class="p-2">
          <a
            href="#"
            id="export-pdf"
            class="flex items-center p-3 hover:bg-gray-50 rounded-lg"
          >
            <div
              class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 text-red-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
                />
              </svg>
            </div>
            <div class="flex-1">
              <div class="text-gray-900">导出为PDF</div>
              <div class="text-xs text-gray-500">生成PDF格式简历文件</div>
            </div>
          </a>
          <a
            href="#"
            id="export-word"
            class="flex items-center p-3 hover:bg-gray-50 rounded-lg"
          >
            <div
              class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 text-blue-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
            </div>
            <div class="flex-1">
              <div class="text-gray-900">导出为Word</div>
              <div class="text-xs text-gray-500">生成Word格式简历文件</div>
            </div>
          </a>
        </div>
        <div class="p-4">
          <button
            id="export-cancel-btn"
            class="w-full py-2.5 bg-gray-100 rounded-md text-gray-800 text-sm font-medium"
          >
            取消
          </button>
        </div>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <iframe
      src="../common/tabbar.html"
      class="fixed bottom-0 left-0 w-full h-16 border-none"
    ></iframe>

    <script>
      // 标签页切换
      const tabs = document.querySelectorAll(".tab");
      const comparisonContent = document.getElementById("comparison-content");
      const suggestionContent = document.getElementById("suggestion-content");

      tabs.forEach((tab) => {
        tab.addEventListener("click", () => {
          const tabType = tab.getAttribute("data-tab");

          // 更新标签样式
          tabs.forEach((t) => {
            t.classList.remove("active");
            t.querySelector("span").classList.remove(
              "text-purple-600",
              "font-medium"
            );
            t.querySelector("span").classList.add("text-gray-600");
            const line = t.querySelector("div");
            if (line) line.classList.add("hidden");
          });

          tab.classList.add("active");
          tab.querySelector("span").classList.remove("text-gray-600");
          tab
            .querySelector("span")
            .classList.add("text-purple-600", "font-medium");
          const line = tab.querySelector("div");
          if (line) line.classList.remove("hidden");

          // 显示对应内容
          if (tabType === "comparison") {
            comparisonContent.classList.remove("hidden");
            suggestionContent.classList.add("hidden");
          } else {
            comparisonContent.classList.add("hidden");
            suggestionContent.classList.remove("hidden");
          }
        });
      });

      // 导出简历弹出层
      const exportBtn = document.getElementById("export-btn");
      const exportMenu = document.getElementById("export-menu");
      const exportCancelBtn = document.getElementById("export-cancel-btn");
      const exportPdf = document.getElementById("export-pdf");
      const exportWord = document.getElementById("export-word");

      exportBtn.addEventListener("click", () => {
        exportMenu.classList.remove("hidden");
      });

      exportCancelBtn.addEventListener("click", () => {
        exportMenu.classList.add("hidden");
      });

      exportPdf.addEventListener("click", () => {
        // 这里可以添加导出PDF的逻辑
        showExportToast("PDF导出成功");
        exportMenu.classList.add("hidden");
      });

      exportWord.addEventListener("click", () => {
        // 这里可以添加导出Word的逻辑
        showExportToast("Word导出成功");
        exportMenu.classList.add("hidden");
      });

      function showExportToast(message) {
        const toast = document.createElement("div");
        toast.className =
          "fixed top-16 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 text-white px-4 py-2 rounded-lg text-sm z-50";
        toast.textContent = message;
        document.body.appendChild(toast);

        // 2秒后移除提示
        setTimeout(() => {
          toast.remove();
        }, 2000);
      }
    </script>
  </body>
</html>
